<template>
  <v-app id="inspire">
    <v-main>
      <v-container fluid fill-height>
        <v-row align="center" justify="center">
          <!-- <v-col class="col-12 d-flex justify-center">
            <v-img
              src="../assets/logo.png"
              aspect-ratio="1"
              height="100"
              width="100"
              max-height="100"
              max-width="100"
              contain
            ></v-img>
          </v-col> -->

          <v-col class="col-12 d-flex justify-center">
            <v-card
              class="elevation-12"
              width="100%"
              max-width="400"
              max-height="400"
            >
              <v-form @submit.prevent="signIn">
                <v-toolbar color="primary" dark flat>
                  <v-toolbar-title
                    >输入管理员账号密码以进入后台系统</v-toolbar-title
                  >
                </v-toolbar>
                <v-card-text>
                  <v-text-field
                    v-model="credentials.username"
                    name="login"
                    placeholder="用户名"
                    prepend-icon="person"
                    type="text"
                    :error="hasError"
                    :error-messages="error"
                  ></v-text-field>

                  <v-text-field
                    id="password"
                    v-model="credentials.password"
                    placeholder="用户密码"
                    name="password"
                    prepend-icon="lock"
                    type="password"
                    :error="hasError"
                    :error-messages="error"
                  ></v-text-field>
                  <v-row>
										<v-col class="col-6 d-flex justify-center">
                    <v-text-field
                      v-model="captcha_results"
                      placeholder="验证码"
											prepend-icon="mdi-refresh"
                      name="captcaha"
                      :error="hasError"
                      :error-messages="error"
                    ></v-text-field>
										</v-col>
										<v-col class="col-6 d-flex justify-center">
										<v-img :src="captchaInfo.image_base64" max-height="45" max-width="175" @click="getCaptcha()"> </v-img>
										</v-col>
                  </v-row>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn type="submit" color="primary">登录</v-btn>
                </v-card-actions>
              </v-form>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: "SignIn",
  data() {
    return {
      credentials: {
        username: "",
        password: "",
      },
      captchaInfo: {
        captcha_hash: "",
        image_base64: "",
        timestamp: 0,
      },
      captcha_results: ""
    };
  },
  computed: {
    error() {
      return this.$store.getters["auth/error"];
    },
    hasError() {
      return this.error !== null;
    },
  },
  mounted() {
    this.getCaptcha()
  },
  methods: {
    signIn() {
      let data = {...this.credentials}
      data.captcha_hash = this.captchaInfo.captcha_hash
      data.timestamp = this.captchaInfo.timestamp
      data.captcha_results = this.captcha_results
      this.$store
        .dispatch("auth/login", data)
        .then(() => {
          this.$router.replace({ name: "Main" });
        })
        .then(() => {
          this.getTaskduration();
        })
        .catch(() => {});
    },
    getCaptcha(){
      this.$store.dispatch("auth/getCaptcha").then(captcha=>{
        this.captchaInfo = captcha
      })
    }
  },
};
</script>

<style>
.login-page .v-application--wrap {
  background: linear-gradient(#0c5c6f, #003145);
}
</style>
